{% extends 'user_base.html' %}

{% block head_extra %}
<style>
    /* 编辑页面专属样式 */
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #555;
    }
    
    .form-input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 1rem;
        transition: border 0.3s;
    }
    
    .form-input:focus {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }
    
    .radio-group {
        display: flex;
        gap: 15px;
        margin-top: 5px;
    }
    
    .radio-option {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .form-actions {
        display: flex;
        gap: 10px;
        margin-top: 25px;
        justify-content: flex-end;
    }
    
    .btn {
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s;
    }
    
    .btn-primary {
        background-color: var(--primary-color);
        color: white;
        border: none;
    }
    
    .btn-primary:hover {
        background-color: #2980b9;
    }
    
    .btn-secondary {
        background: none;
        border: 1px solid #ddd;
        color: #555;
    }
    
    .btn-secondary:hover {
        background-color: #f8f9fa;
    }
</style>
{% endblock %}

{% block content %}
<div class="profile-container">
    <div class="profile-header">
        <h1>编辑个人信息</h1>
    </div>
    
    <div class="profile-body">
        <form method="post" id="edit-form">
            <!-- 用户名字段 -->
            <div class="form-group">
                <label for="username-input" class="form-label">用户名:</label>
                <input 
                    type="text" 
                    id="username-input" 
                    name="username" 
                    class="form-input"
                    placeholder="请输入您的用户名"
                    value="{{ username }}"
                    required
                >
            </div>
            
            <!-- 性别选择 -->
            <div class="form-group">
                <label class="form-label">性别:</label>
                <div class="radio-group">
                    <label class="radio-option">
                        <input type="radio" name="gender" value="male" {% if gender == 'male' %}checked{% endif %}> 男
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="gender" value="female" {% if gender == 'female' %}checked{% endif %}> 女
                    </label>
                    <label class="radio-option">
                        <input type="radio" name="gender" value="other" {% if gender == 'other' %}checked{% endif %}> 其他
                    </label>
                </div>
            </div>
            
            <!-- 国家字段 -->
            <div class="form-group">
                <label for="country-input" class="form-label">国家:</label>
                <input 
                    type="text" 
                    id="country-input" 
                    name="country" 
                    class="form-input"
                    placeholder="请输入您的国家"
                    value="{{ country }}"
                    required
                >
            </div>
            
            <!-- 邮箱字段 -->
            <div class="form-group">
                <label for="email-input" class="form-label">邮箱:</label>
                <input 
                    type="email" 
                    id="email-input" 
                    name="email" 
                    class="form-input"
                    placeholder="example@domain.com"
                    value="{{ email }}"
                >
            </div>
            
            <!-- 操作按钮 -->
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="window.location.href='/user/myProfile'">
                    取消
                </button>
                <button type="submit" class="btn btn-primary" id="save-btn">
                    保存更改
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}